<template>
  <a-modal
    title="修改密码"
    :visible="visible"
    :centered="true"
    :maskClosable="false"
    :bodyStyle="{ height: '248px' }"
    class="change-password-modal"
    okText="保存"
    @ok="onOk()"
    @cancel="visible = false"
  >
    <a-form
      :form="form"
      :hideRequiredMark="true"
      labelAlign="left"
      :labelCol="{
        xs: { span: 20 },
        sm: { span: 4, offset: 4 },
      }"
      :wrapperCol="{
        xs: { span: 20 },
        sm: { span: 10 },
      }"
    >
      <a-form-item label="旧密码" :colon="false">
        <a-input
          v-decorator="[
            'password',
            {
              rules: [
                {
                  required: true,
                  message: '请填写旧密码',
                },
              ],
            },
          ]"
          type="password"
          autocomplete="off"
        />
      </a-form-item>
      <a-form-item label="新密码" :colon="false" hasFeedback>
        <a-input
          v-decorator="[
            'newPassword',
            {
              rules: [
                {
                  required: true,
                  message: '请填写密码',
                },
                {
                  validator: validateToNextPassword,
                },
              ],
            },
          ]"
          type="password"
          autocomplete="off"
        >
          <div slot="suffix">{{ passwordLevel }}</div>
        </a-input>
      </a-form-item>
      <a-form-item label="密码确认" :colon="false" hasFeedback>
        <a-input
          v-decorator="[
            'confirm',
            {
              rules: [
                {
                  required: true,
                  message: '请再次填写密码',
                },
                {
                  validator: this.compareToFirstPassword,
                },
              ],
            },
          ]"
          type="password"
          autocomplete="off"
          @blur="handleConfirmBlur"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang='ts' src='./index.ts'></script>
<style lang='scss' scoped>
@import "./_index.scss";
</style>